<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="test"></div>

    <!-- 引入核心库 -->
    <script type="text/javascript" src="./React-js/16.8/react.development.js"></script>
    <!-- 用于支持react操作DOM -->
    <script text="text/javascript" src="./React-js/16.8/react-dom.development.js"></script>
    <!-- 用于将jsx转换为js -->
    <script text="text/javascript" src="./React-js/16.8/babel.min.js"></script>
    <!-- 用于对组件标签属性进行限制。全局出现PropTypes对象 -->
    <script src="./React-js/16.8/prop-types.js"></script>

    <script type="text/babel">
        // class Weather extends React.Component {
        //     // 写在类里面，相当于给类加属性
        //     static propTypes = {
        //         name: PropTypes.string,
        //         sex: PropTypes.string,
        //         age: PropTypes.number.isRequired,  
        //     }
        //     static defaultProps = {
        //         sex: '我是默认值'
        //     }

        //     render() {  // 注意：props是只读的
        //         return (
        //             <ul>
        //                 <li>姓名：{this.props.name}</li>
        //                 <li>性别：{this.props.sex}</li>
        //                 <li>年龄：{this.props.age + 1}-----</li>
        //             </ul>
        //         )
        //     }
        // }

        // 定义函数组件
        function Weather(props) {
            console.log(this, props);  // 经过babel转化开启严格模式，this没有明确的调用，所以为undefined
            return (
                <ul>
                    <li>姓名：{props.name}</li>
                    <li>性别：{props.sex}</li>
                    <li>年龄：{props.age + 1}-----</li>
                </ul>
            )
        }
        Weather.propTypes = {
            name: PropTypes.string,
            sex: PropTypes.string,
            age: PropTypes.number.isRequired,
        }
        Weather.defaultProps = {
            sex: '我是默认值'
        }


        // 渲染组件到页面
        ReactDOM.render(<Weather name="song" age={666} />, document.getElementById('test'))
    </script>
</body>

</html>